<template>
    <div 
      class="node"
      :class="{ 'parent-node': node.isParent }"
      :draggable="!isConnecting"
      :data-node-id="node.id"
      @dragstart="$emit('dragstart', $event)"
      @dragend="$emit('dragend')"
      @contextmenu.prevent="(e) => handleContextMenu(e)"
      :style="{
        left: `${node.x}px`,
        top: `${node.y}px`
      }"
    >
      <div class="content">
        {{ node.id }}
        <span v-if="node.isParent" @click="toggleChildren">▼</span>
      </div>
      <button class="delete-btn" @click="$emit('delete')">×</button>
      <!-- 添加连接点 -->
      <div 
        class="connector"
        @mousedown.stop.prevent="startConnection"
        @mousemove.stop.prevent="handleMouseMove"
      ></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import type { Node, Edge } from '../types';
  import { ref } from 'vue';
  
  const props = defineProps<{
    node: Node;
    edges: Edge[];
  }>();
  
  const emit = defineEmits(['dragstart', 'dragend', 'delete', 'startConnection', 'endConnection']);
  
  const isConnecting = ref(false);
  
  const startConnection = (event: MouseEvent) => {
    isConnecting.value = true;
    emit('startConnection', { nodeId: props.node.id, event });
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUpOnDocument);
  };
  
  const handleMouseUpOnDocument = (event: MouseEvent) => {
    if (isConnecting.value) {
      const targetElement = event.target as HTMLElement;
      const nodeElement = targetElement.closest('.node');
      if (nodeElement) {
        const targetNodeId = nodeElement.getAttribute('data-node-id');
        if (targetNodeId && targetNodeId !== props.node.id) {
          emit('endConnection', { nodeId: targetNodeId, event });
        }
      }
      isConnecting.value = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUpOnDocument);
    }
  };
  
  const handleMouseMove = (event: MouseEvent) => {
    if (isConnecting.value) {
      emit('mousemove', event);
    }
  };
  
  const toggleChildren = () => {
    // 实现子节点显示逻辑
  };
  </script>
  
  <style scoped>
  .node {
    position: absolute;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgb(98, 197, 131);
    cursor: move;
    position: relative;
    min-width: 40px;
    max-width: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .parent-node {
    background-color: rgb(100, 100, 197);
    font-weight: bold;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
  }

  .delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ff6b6b;
    color: white;
    border: none;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }

  .delete-btn:hover {
    opacity: 1;
    background-color: #ff4444;
  }

  .connector {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #2196f3;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .connector:hover {
    opacity: 1;
  }
  </style>
  